<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="60%">
        <div>
            <el-checkbox-group v-model="checkList">
                <div v-for="(item, index) in mainCategoryList" :key="index" style="display:inline-block;width:120px;height:120px;">
                    <div style="display:flex;flex-direction:column;align-items:center;">
                        <img style="width:64px;height:64px;" :src="item.src"/>
                        <el-checkbox :label="item.IMP+' '+item.text" :value="item.id+''"/>
                    </div>
                </div>
            </el-checkbox-group>
        </div>
      
    <template #footer>
      <el-button @click="submitForm()" type="primary">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
	//辅助图标
	import otherimg1 from '@/assets/image/other1.png'
	import otherimg2 from '@/assets/image/other2.png'
	import otherimg3 from '@/assets/image/other3.png'
	import otherimg4 from '@/assets/image/other4.png'

/** 货物资料 表单 */
defineOptions({ name: 'SubCategory' })

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const checkList = ref<string[]>([]);
const mainCategoryList= ref([
					{
						id: 1,
					IMP: 'CAO',
					number: '',
					text: '仅限货机',
					src: otherimg1
				}, {
					id: 2,
					IMP: 'RCL',
					number: '',
					text: '低温液体',
					src: otherimg2
				}, {
					id: 3,
					IMP: '',
					number: '',
					text: '远离热源',
					src: otherimg3
				}, {
					id: 4,
					IMP: '',
					number: '',
					text: '向上标签',
					src: otherimg4
					},
				]);

/** 打开弹窗 */
const open = async (mainCategoryCode:string) => {
  checkList.value = mainCategoryCode.split(",")
  dialogVisible.value = true
  dialogTitle.value = '辅助类别代码选择'
}

const findMainCateGory = (mainCategoryCode:string)=>{
    let ids = mainCategoryCode.split(",");
    if(!mainCategoryCode){
		ids = []
	}else{
		ids = mainCategoryCode.split(",")
	}
    let arr:any[] = [];
    for(let i = 0; i < mainCategoryList.value.length; i++){
        let data = mainCategoryList.value[i];
        let id = data.id + ""
        if(ids.indexOf(id) > -1){
            arr.push(data);
        }
    }
    return arr;
}
defineExpose({ open, findMainCateGory }) // 提供 open 方法，用于打开弹窗

const emit = defineEmits(["success"])
const submitForm = ()=>{
    emit("success", checkList.value.join(","));
    dialogVisible.value = false
}

</script>
